<template>
  <el-select
    v-if="type==='select'"
    v-model="dictValue"
    :clearable="isClearable"
    :placeholder="placeholder"
    :disabled="disabled"
    style="width: 100%;"
    @change="handleChange"
  >
    <el-option
      v-for="(dict,index) in dictOptions"
      :key="index"
      :label="dict.itemName"
      :value="dict.itemKey"
      :disabled="dict.disabled"
    />
  </el-select>
  <el-radio-group v-else-if="type==='radio'" v-model="dictValue" :disabled="disabled" @change="handleChange">
    <el-radio v-for="(dict,index) in dictOptions" :key="index" :label="dict.itemKey">{{ dict.itemName }}</el-radio>
  </el-radio-group>
  <!--
<div v-else-if="type==='button'">
    <div
      v-for="dict in dictOptions"
      :key="dict.itemId"
      style="display: inline-block;padding-right: 10px;padding-left: 10px;border: 1px solid #DCDFE6;border-radius: 4px;height: 40px;line-height: 40px"
      @click="handleChange(dict.itemKey)"
    >{{ dict.itemName }}</div>
  </div>
-->

  <el-radio-group v-else-if="type==='button'" v-model="dictValue" @change="handleChange">
    <el-radio-button
      v-for="(dict,index) in dictOptions"
      :key="index"
      :disabled="disabled"
      :label="dict.itemKey"
    >{{ dict.itemName }}</el-radio-button>
  </el-radio-group>
<!--  <el-button-group v-else-if="type==='button'">
    <el-button
      v-for="(dict,index) in dictOptions"
      :key="index"
      :disabled="disabled"
      :class="{active: activeButtonIndex === index}"
      @click="handleChange(dict.itemKey)"
    >{{ dict.itemName }}</el-button>
  </el-button-group>-->
</template>

<script>
import { selectByDictKey } from '@/api/system/dict'

export default {
  name: 'DictSelect',
  props: {
    dictKey: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      default: ''
    }, // 绑定的数据
    defaultValue: {
      type: String,
      default: ''
    },
    isClearable: {
      type: Boolean,
      default: true
    },
    type: {
      type: String,
      default: 'select'
    },
    disabledValue: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      dictValue: '',
      dictOptions: [],
      activeButtonIndex: 0
    }
  },
  watch: {
    dictKey: {
      immediate: true,
      async handler() {
        await this.initDictData(this.dictKey)
      }
    },
    value(v1, v2) {
      if (v1) {
        const result = this.dictOptions.filter(e => String(e.itemKey) === String(v1))
        if (result && result.length > 0) {
          this.dictValue = result[0].itemKey
        } else {
          this.dictValue = ''
        }
      } else {
        this.dictValue = ''
      }
    }
  },
  mounted() {
    this.dictValue = this.value ? this.value : this.defaultValue
  },
  methods: {
    initDictData() { // 获取对应字典数据
      if (this.type === 'button') {
        this.dictOptions.push({ itemKey: '-1', itemName: '全部', active: true })
      }
      const item = sessionStorage.getItem(this.dictKey)
      if (!item || item.length === 0 || item === '[]') {
        let data = []
        selectByDictKey(this.dictKey).then(resp => {
          if (resp.success) {
            data = resp.data
          }
        }).finally(() => {
          sessionStorage.setItem(this.dictKey, JSON.stringify(data))
          const options = JSON.parse(JSON.stringify(data))
          options.forEach(i => {
            if (this.disabledValue.indexOf(i.itemKey) !== -1) {
              i.disabled = true
            }
            this.dictOptions.push(i)
          })
          // this.dictOptions = options
          this.dictValue = this.value ? this.value : ''
        })
      } else {
        const options = JSON.parse(item)
        options.forEach(i => {
          if (this.disabledValue.indexOf(i.itemKey) !== -1) {
            i.disabled = true
          }
          this.dictOptions.push(i)
        })
        // this.dictOptions = options
      }
    },
    handleChange(e) {
      var element = this.dictOptions.filter(i => i.itemKey === e)[0]
      this.activeButtonIndex = this.dictOptions.indexOf(element)
      this.$emit('input', e)
    },
    resetActive() {
      this.activeButtonIndex = 0
    }
  }
}
</script>

<style scoped>
.active{
  background-color: #20a0ff;
  color: #FFFFFF;
}
</style>
